Component Instances are reusable copies of a main component in Figma. They allow designers to use the same UI element multiple times while maintaining a connection with the original main component. Instead of creating the same button, card, input, navigation item, icon, or modal repeatedly, a designer can create one main component and insert instances wherever required.
A component instance can be customized for a particular screen while still benefiting from the structure and updates of its main component. This makes component instances an essential part of scalable UI design, design systems, collaborative workflows, and professional Figma projects.
For professional Figma learning and practical design-system training, visit JustAcademy Figma Training and Register for Figma Course Demo.
A Component Instance is a reusable copy of a main component. The instance remains connected to the main component and can be inserted into one or more screens. The main component acts as the source of the reusable design.
Main Component
↓
Component Instance
↓
Screen 1
↓
Screen 2
↓
Screen 3
A component instance is a connected, reusable copy of a main component that can be customized for a specific use while maintaining its relationship with the original component.
Main Component
↓
┌───────────────┐
│ Button │
│ Icon + Label │
└───────────────┘
↓
┌──────┬──────┬──────┐
↓ ↓ ↓
Instance Instance Instance
1 2 3
Suppose a website has 50 buttons. Designing each button separately would make future changes difficult. Instead, a designer creates one Button main component and inserts instances of that component throughout the website.
Button Main Component
↓
Login Instance
Register Instance
Submit Instance
Continue Instance
Buy Now Instance
The button structure remains consistent while the content can differ according to the context.
| Feature | Main Component | Component Instance |
|---|---|---|
| Purpose | Source of the reusable design | Reusable copy of the source |
| Structure | Defines the component structure | Uses the defined structure |
| Editing | Can be structurally edited | Supports controlled customization |
| Updates | Defines component updates | Can receive applicable updates |
| Reuse | Acts as the source | Used repeatedly in screens |
Create Main Component
↓
Component Available in Assets
↓
Insert Instance
↓
Place Instance on Canvas
↓
Customize Supported Properties
↓
Reuse Across Screens
↓
Update Main Component
↓
Instances Receive Applicable Changes
Before creating an instance, there must be a main component. A main component can be created from a collection of objects or layers such as buttons, fields, cards, menus, icons, and other UI elements.
Button
├── Icon
└── Label
Select the required layers and create a component. Figma places the selected layers inside a special component frame.
Once the main component exists, the easiest way to reuse it is through the Assets panel.
The Assets panel provides access to reusable components available in the current file and enabled libraries. It helps designers quickly find and insert reusable components.
| Operating System | Shortcut |
|---|---|
| macOS | Option + 2 |
| Windows | Alt + 2 |
Assets
↓
Search Component
↓
Select Component
↓
Drag to Canvas
↓
Component Instance Created
Figma also provides Quick Insert for quickly finding and inserting components. This is useful when a file contains a large number of reusable assets.
Use Shift + I to open the Quick Insert interface and search for the required component.
Shift + I
↓
Search
↓
Select Component
↓
Insert Instance
An existing instance can be duplicated to create another instance. This is useful when multiple instances of the same component are required on a screen.
Existing Instance
↓
Duplicate
↓
New Instance
Component instances can also be copied and pasted. This provides a quick way to reuse an existing instance in another location or, depending on the file and library workflow, another design file.
Figma uses component indicators to help distinguish main components and instances. A main component uses the purple component indicator, while an instance uses an outlined component indicator.
The main component can be identified by the purple component icon in the Layers panel.
A component instance uses an outlined component indicator in the Layers panel. This helps designers understand that the selected element is connected to another main component.
Main Component
Purple Component Indicator
↓
Source
Instance
Outlined Component Indicator
↓
Connected Copy
The connection between the main component and instance is one of the most important features of component-based design. The instance uses the main component as its source and can receive applicable changes from it.
Main Component
↓
Update Component
↓
Connected Instances
↓
Consistent UI Across Screens
Before:
Button Radius = 6px
Main Component
↓
Instance 1
Instance 2
Instance 3
Update Main Component:
Radius = 10px
Result:
Instance 1 → Updated
Instance 2 → Updated
Instance 3 → Updated
Instances are designed to be reusable but they are not limited to being identical in every context. Figma provides supported overrides and component properties that allow designers to customize intended parts of an instance.
One of the most common instance customizations is changing text.
Main Component:
Button/Primary
Label = Button
Instance 1:
Label = Login
Instance 2:
Label = Register
Instance 3:
Label = Continue
Overrides are changes made to an individual instance while keeping its relationship with the main component. They allow the same component to be used in different contexts without creating separate components for every small variation.
Main Component:
Button/Primary
Instances:
1. Login
2. Register
3. Continue
4. Submit
5. Save Changes
All instances can follow the same design structure while serving different purposes.
| Customization | Detaching |
|---|---|
| Maintains component relationship | Breaks component relationship |
| Useful for contextual changes | Creates an independent object |
| Can receive applicable component updates | No longer behaves as a connected instance |
| Preferred for reusable systems | Used when independence is intentional |
Component properties provide controlled customization options for instances. Instead of allowing unrestricted editing, designers can define exactly which aspects of a component should be customizable.
| Property Type | Purpose | Example |
|---|---|---|
| Boolean | Show or hide supported layers | Show Icon |
| Text | Change text content | Button Label |
| Instance Swap | Replace a nested component | Change Icon |
| Variant | Select predefined variations | Size or State |
| Slot | Provide flexible content area | Card Content |
A Boolean property provides a true or false control for supported layer visibility.
Show Icon = True
↓
Icon Visible
Show Icon = False
↓
Icon Hidden
A Text property allows designated text to be changed from the component controls.
Button Label:
"Submit"
Change to:
"Continue"
Change to:
"Save Changes"
An Instance Swap property allows a nested component instance to be replaced by another component.
Leading Icon
↓
Search
Home
Profile
Settings
Variant properties allow an instance to select from predefined variations of a component.
Button
├── Primary
├── Secondary
├── Danger
└── Ghost
A Slot creates a flexible content area within a component. It can allow designers to add, edit, rearrange, or remove content in an instance while keeping the instance connected to the main component.
Card
├── Header
├── Slot: Content
└── Footer
Auto Layout is especially useful when component instances need to adapt to changing content. Buttons, tags, badges, navigation items, list items, cards, and input fields frequently benefit from Auto Layout.
Button/Primary
└── Auto Layout
├── Icon
└── Label
Padding: 12 / 20
Gap: 8
Width: Hug Contents
Height: Hug Contents
Hug Contents allows a component or component instance to adjust its dimensions according to its content. It is useful for text-driven elements such as buttons and badges.
Fill Container allows an instance to occupy available space inside its parent. It is useful for inputs, cards, content areas, and responsive layouts.
Fixed dimensions are useful when a component needs predictable width or height. Examples include avatars, icon containers, and certain standardized UI controls.
Button Instance
"OK"
↓
Small Width
"Continue"
↓
Medium Width
"Save Changes and Continue"
↓
Larger Width
When the main component uses appropriate Auto Layout and sizing rules, its instances can handle different content more effectively.
A component can contain other component instances. This is called component nesting and is an important technique for building modular design systems.
Product Card
├── Badge Instance
├── Image
├── Rating Instance
├── Price
└── Button Instance
Component composition means creating complex UI components by combining smaller reusable components.
Icon
+
Input
+
Button
↓
Form Component
↓
Form Section
↓
Complete Screen
Card/Product
├── Image
├── Badge Instance
├── Content
│ ├── Title
│ ├── Description
│ └── Price
└── Button Instance
Variants are useful when a component has multiple predefined versions. An instance can select the appropriate variant rather than requiring a completely separate component.
Button
├── Type = Primary
├── Type = Secondary
├── Type = Danger
└── Type = Ghost
Size:
Small
Medium
Large
State:
Default
Hover
Pressed
Disabled
| Separate Components | Variants |
|---|---|
| Each variation is independent | Related variations are grouped |
| Can become difficult to manage | Provides organized variations |
| Useful for unrelated UI elements | Useful for related component states or types |
Component instances can use Instance Swap properties to replace nested components with other compatible components. This is especially useful for icons, avatars, logos, and other nested UI elements.
Button Instance
├── Icon = Search
Swap:
Search → Download
Swap:
Download → Arrow Right
Preferred instances can be used to provide a curated set of suitable component choices for a nested instance. This can make component selection easier and reduce the chance of using unrelated assets.
When an instance is selected, designers may need to locate the main component to understand its source or make a structural change. Figma provides Go to main component functionality.
Right-click the instance and choose Go to main component where available. This takes the designer to the source component.
| Operating System | Shortcut |
|---|---|
| macOS | Control + Option + Command + K |
| Windows | Control + Alt + Shift + K |
Select Instance
↓
Go to Main Component
↓
Edit Source Component
↓
Save Changes
↓
Connected Instances Receive Applicable Updates
If an instance has customizations that are no longer required, the instance can be reset using the available reset controls. This is useful for removing unwanted or accidental changes.
Detaching an instance breaks its relationship with the main component and turns it into an independent design object. Once detached, it no longer behaves as a connected component instance.
Detaching can be appropriate when the design intentionally needs to become independent and should no longer follow the source component. It should not be used as the default method for normal instance customization.
Figma libraries allow reusable components to be shared across files and teams. Designers can insert instances of published components into their working files.
Library
↓
Main Component
↓
Publish
↓
Team File
↓
Insert Instance
↓
Use in Product Screens
↓
Library Update
↓
Review / Apply Update
| Local Component | Library Component |
|---|---|
| Exists in the current file | Shared through a library |
| Useful for project-specific systems | Useful for team-wide systems |
| Managed locally | Managed through publishing and library workflows |
| Good for prototypes and individual projects | Good for scalable design systems |
When a published library component changes, files using instances of that component can receive information about the available update. Designers can review and apply library changes according to the project's workflow.
Reusable components should be documented so designers understand their purpose, available options, and intended usage.
Component:
Button/Primary
Purpose:
Used for the primary action.
Available Properties:
Label
Show Icon
Icon
Size
State
Recommended Usage:
Use for the main action of a section or screen.
Instances inherit the identity of their source component, but clear layer naming and component organization make them easier to understand in the Layers panel.
Button/Primary
Button/Secondary
Button/Icon
Input/Text
Input/Search
Card/Product
Card/Profile
Navigation/Item
Badge/Success
Modal/Confirmation
Create a login page using reusable component instances instead of designing every element separately.
Login Screen
├── Logo Instance
├── Input/Email Instance
├── Input/Password Instance
├── Checkbox Instance
├── Button/Primary Instance
└── Link Instance
Registration Screen
├── Input/Name Instance
├── Input/Email Instance
├── Input/Phone Instance
├── Input/Password Instance
├── Input/Confirm Password Instance
└── Button/Primary Instance
Product Grid
├── Card/Product Instance
├── Card/Product Instance
├── Card/Product Instance
├── Card/Product Instance
└── Card/Product Instance
Each instance can contain different product images, names, prices, ratings, and badges while maintaining the same card structure.
Dashboard
├── Header Instance
├── Sidebar Instance
├── Stat Card Instance
├── Stat Card Instance
├── Chart Card Instance
├── Table Instance
└── Pagination Instance
Navigation
├── Home Instance
├── Products Instance
├── Orders Instance
├── Customers Instance
├── Reports Instance
└── Settings Instance
Modal/Confirmation
↓
Delete Account
Delete Product
Logout
Cancel Subscription
One of the biggest mistakes is manually recreating the same UI element. If the element is repeated and follows the same design pattern, consider converting it into a reusable component.
Do not detach an instance simply because its label, icon, or supported property needs to change. First check whether an override, component property, variant, instance swap, or slot can solve the requirement.
An instance may break when content changes if its main component was not configured properly with Auto Layout and resizing behavior.
Unclear component names make it difficult to locate the correct source and instances. Use consistent names and categories.
Do not create unnecessary variants for every possible customization. Use variants for meaningful predefined differences and component properties for controlled customization.
Always test component instances with long labels and content. This is particularly important for buttons, cards, navigation items, inputs, and localization.
Complex components can become difficult to maintain if everything is built as one large object. Use smaller reusable components inside larger components whenever appropriate.
When an instance does not behave as expected, inspect its connection to the main component, overrides, component properties, variants, Auto Layout, resizing behavior, nested components, and parent container.
Create Main Component
↓
Insert Instance
↓
Change Text
↓
Change Supported Properties
↓
Swap Nested Components
↓
Change Variant
↓
Test Long Content
↓
Test Different Sizes
↓
Update Main Component
↓
Verify Instance Behavior
Test instances at different screen sizes and container widths. Check for overflow, clipping, unexpected wrapping, incorrect spacing, and broken alignment.
Longer translated strings can affect component dimensions. Test buttons, navigation, cards, inputs, and labels with longer text to ensure the instance remains usable.
| Duplicate Design | Component Instance |
|---|---|
| Independent copy | Connected to main component |
| Manual updates required | Can receive applicable component updates |
| May become inconsistent | Supports consistency |
| Difficult to maintain at scale | Designed for reusable systems |
| Connected Instance | Detached Object |
|---|---|
| Connected to main component | Independent object |
| Can receive applicable source updates | Does not receive component updates |
| Supports controlled customization | Allows independent editing |
| Best for reusable design systems | Best when independence is intentional |
| Component Instance | Variant |
|---|---|
| A reusable copy of a component | A predefined variation of a component |
| Used throughout screens | Used to define component types or states |
| Can be customized through supported properties | Provides predefined choices |
| Example: Login Button Instance | Example: Button State = Disabled |
A component instance is a reusable copy of a main component that remains connected to its source component.
The main component is the source that defines the reusable design, while the instance is a connected copy used in the design.
You can insert it from the Assets panel, component details, Quick Insert, or by duplicating/copying an existing component or instance.
Option + 2 on macOS and Alt + 2 on Windows.
Quick Insert is a fast component and action search interface opened using Shift + I.
Connected instances can receive applicable changes made to the main component.
Yes. Supported overrides and component properties allow instances to be customized without unnecessarily breaking the component relationship.
Component properties provide controlled customization options such as Boolean, Text, Instance Swap, Variant, and Slot properties.
It allows a nested component instance to be replaced with another component.
A Boolean property provides a true or false control for supported layer visibility.
A Text property identifies text that can be changed through the component's controls.
A Slot provides a flexible content area where content can be added or rearranged while keeping the instance connected.
Select the instance, right-click it, and use Go to main component where available.
An override is an instance-level customization that allows an individual instance to differ from the main component in supported ways.
Detaching breaks the connection with the main component and prevents the object from behaving as a connected instance.
They allow standardized components to be reused consistently across many screens and files.
Yes. Nested component instances are commonly used to build modular and scalable design systems.
Auto Layout helps instances adapt to different content and available space.
A duplicate frame is independent, while a component instance maintains a relationship with its main component.
A component library allows reusable components to be shared across files and teams.
Main Component = Source
Instance = Connected Reusable Copy
Assets = Component Discovery
Quick Insert = Fast Component Search
Override = Instance-Level Customization
Variant = Predefined Variation
Boolean = Show / Hide
Text Property = Change Text
Instance Swap = Replace Nested Component
Slot = Flexible Content Area
Nested Component = Component Inside Component
Library = Shared Components
Detach = Break Component Connection
Design UI Element
↓
Create Main Component
↓
Name and Organize Component
↓
Add Auto Layout
↓
Add Variants / Properties
↓
Add Documentation
↓
Publish to Library if Required
↓
Find Component in Assets
↓
Insert Instance
↓
Customize Instance
↓
Use Across Screens
↓
Test Responsive Behavior
↓
Update Main Component
↓
Review Instance Updates
↓
Maintain Design System
Component Instances are a fundamental part of professional Figma workflows. They allow designers to create one reliable main component and reuse it across multiple screens while maintaining consistency and reducing repetitive work. By combining instances with Auto Layout, variants, component properties, nested components, slots, and libraries, designers can create flexible and scalable design systems.
The ideal workflow is Create → Insert → Customize → Reuse → Test → Update → Maintain. Understanding component instances helps designers work faster, maintain consistency, simplify collaboration, and create production-ready design systems.
For structured Figma learning, practical projects, and advanced component-based design workflows, visit JustAcademy Figma Training and Register for Figma Course Demo.
